{{/*
Copyright 2012 Takashi Yokoyama

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/}}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>勘定科目設定</title>
	<link rel="stylesheet" href="style.css"></link>
	<link href="jquery-ui-1.8.18.custom.css" rel="stylesheet">
	<script src="//www.google.com/jsapi"></script>
	<script>
		google.load("jquery", "1.7");
		google.load("jqueryui", "1.8");
	</script>
	<script>
		$(function() {
			$('#createType').click(function(e) {
				var parameters = {
					 name: $('#name').val()
					,expense: $('#expense:checked:enabled').val()
					,detail: $('#detail').val()
				};

				$.ajax({
					type: "POST",
					url: '/addtype',
					data: parameters,
					dataType: "json",
					success: function(data, status, xhr) {
						// 入力欄をクリア
						$('#name').val('');
						$('#expense').removeAttr('checked');
						$('#detail').val('');

						var contents =
						 		'<section><h2>勘定科目：' + data.Name + '</h2>'
								+ '<div><p>' 
								+ ((data.IsExpense) ? '経費扱い' : '経費扱いにしない')
								+ '</p>'
								+ '</div>'
								+ '<div>' 
								+ '詳細:' 
								+ '<p>' 
								+ data.Detail
								+ '</p>'
								+ '</div>'
								+ '<input type="button" id="editbtn" value="編集" />'
								+ '<input type="button" id="deletebtn" value="削除" />'
							+ '</section>';

						var obj = $('#typelist').children(':last-child');
						$('#typelist').children(':last-child').after(contents);
					},
					error: function(xhr, status, error) {
						alert('サーバへの登録でエラーが発生しました。もう一度登録してください。' + '[' + xhr.status + ']');
					}
				});
			});

			$('#editbtn').live(
				'click',
				function(e) {
					var target = $(this).closest('section');
					var name = $(target).children('input#name').val();
					var expense = $(target).children('input#expense').val();
					var detail = $(target).children('input#detail').val();
					var id = $(target).children('input#id').val();

					var contents = '<section class="contents">'
								 + '<h2>勘定科目の編集</h2>'
								 + '<div>'
								 + '<label for="name">勘定科目名：</label>'
								 + '<input type="text" name="name" id="name"'
								 + 'value="' + name + '" />'
								 + '</div>'
								 + '<div>'
								 + '<label for="expense">経費</label>'
								 + '<input type="checkbox" name="expense" id="expense" value="1" '
								 + ((expense) ? 'checked />' : '/>')
								 + '</div>'
								 + '<div>'
								 + '<div>'
								 + '<label for="detail">詳細（補足など）：</label>'
								 + '</div>'
								 + '<div>'
								 + '<textarea rows="20" cols="70" name="detail" id="detail">'
								 + detail
								 + '</textarea>'
								 + '</div>'
								 + '</div>'
								 + '<input type="hidden" value="' + id + '" />'
								 + '<input type="button" id="updatebtn" value="更新" />'
								 + '<input type="button" id="cancelbtn" value="キャンセル" />'
								 + '</section>'
								 ;
					$(target).after(contents);
				}
			);

			$('#cancelbtn').live(
				'click',
				function(e) {
					$(this).closest('section').remove();
				}
			);

			$('#updatebtn').live(
				'click',
				function(e) {
					var target = $(this).closest('section');
					var parameters = {
						 name: $(target).children('#name').val()
						,expense: $(target).children('#expense:checked:enabled').val()
						,detail: $(target).children('#detail').val()
						,id : $(target).children('#id').val()
					};

					$.ajax({
						type: "POST",
						url: '/updatetype',
						data: parameters,
						dataType: "json",
						success: function(data, status, xhr) {
							var contents =
							 		'<section><h2>勘定科目：' + data.Name + '</h2>'
									+ '<div><p>' 
									+ ((data.IsExpense) ? '経費扱い' : '経費扱いにしない')
									+ '</p>'
									+ '</div>'
									+ '<div>' 
									+ '詳細:' 
									+ '<p>' 
									+ data.Detail
									+ '</p>'
									+ '</div>'
									+ '<input type="button" id="editbtn" value="編集" />'
									+ '<input type="button" id="deletebtn" value="削除" />'
								+ '</section>';

							$(target).after(contents);
						},
						error: function(xhr, status, error) {
							alert('サーバでの更新でエラーが発生しました。もう一度登録してください。' + '[' + xhr.status + ']');
						}
					});					
				}
			);

			$('#deletebtn').live(
				'click',
				function(e) {
					if(window.confirm('削除しますか？')) {
						var target = $(this).closest('section');
						var id = $(target).children('input#id').val();

						var parameters = {id : id};

						$.ajax({
							type: "POST",
							url: '/deletetype',
							data: parameters,
							dataType: "json",
							success: function(data, status, xhr) {
								$(target).remove();
							},
							error: function(xhr, status, error) {
								alert('サーバでの削除でエラーが発生しました。もう一度削除してください。' + '[' + xhr.status + ']');
							}
						});
					}
				}
			);
		});
	</script>
</head>
<body>
	<nav>
		<ul>
			<li><a href="/">トップにもどる</a></li>
		</ul>
	</nav>
	勘定科目設定
	<article id="contents">
		<section class="contents" id="newtype">
			<h2>勘定科目の新規追加</h2>
			<div>
				<label for="name">勘定科目名：</label>
				<input type="text" name="name" id="name" />
			</div>
			<div>
				<label for="expense">経費</label>
				<input type="checkbox" name="expense" id="expense" value="1" />
			</div>
			<div>
				<div>
					<label for="detail">詳細（補足など）：</label>
				</div>
				<div>
					<textarea rows="20" cols="70" name="detail" id="detail"></textarea>
				</div>
			</div>
			<input type="button" id="createType" value="登録" />
		</section>
		<section class="contents" id="typelist">
			{{range .}}
			<section>
				<h2>勘定科目：{{.Type.Name}}</h2>
				<div>
					<p>
						{{if .Type.IsExpense}}
							経費扱い
						{{else}}
							経費扱いにしない
						{{end}}
					</p>
				</div>
				<div>
					詳細:
					<p>
						{{.Type.Detail}}
					</p>
				</div>

				<input type="hidden" id="name" value="{{.Type.Name}}" />
				<input type="hidden" id="expense" value="{{.Type.IsExpense}}" />
				<input type="hidden" id="detail" value="{{.Type.Detail}}" />
				<input type="hidden" id="id" value="{{.Id}}" />
				<input type="button" id="editbtn" value="編集" />
				<input type="button" id="deletebtn" value="削除" />
			</section>
			{{end}}
		</section>
	</article>
</body>
</html>
